<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
	</head>
	<style type="text/css">
		.box {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100vm;
			height: 100vh;
		}

		.box .layui-form {
			width: 70%;
			height: 80%;
			border: 1px solid #c3c3c3;
			box-shadow: 2px 2px #fff;
			border-radius: 8px;
			padding: 30px 10px;
		}

		.img-list {
			width: 100%;
			height: 10px;
		}

		.img-list img {
			display: inline-block;
			width: 100px;
			margin-right: 5px;
		}
	</style>
	<body>
		<div class="box">
			<form class="layui-form" action="javascript:void(0)">
				<div class="layui-form-item">
					<label class="layui-form-label">账户：</label>
					<div class="layui-input-block">
						<input type="text" name="userAccount" required lay-verify="required" placeholder="请输入账户" autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">姓名：</label>
					<div class="layui-input-block">
						<input type="text" name="userName" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码：</label>
					<div class="layui-input-block">
						<input type="text" name="userPassword" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">头像：</label>
					<div class="layui-input-block">
						<button type="button" class="layui-btn" id="uploadImg">
							<i class="layui-icon">&#xe67c;</i>上传图片
						</button>
						<div class="img-list"></div>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">修改人姓名：</label>
					<div class="layui-input-block">
						<input type="text" name="updateUserName" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">备注</label>
					<div class="layui-input-block">
						<textarea name="memo" placeholder="请输入内容" class="layui-textarea"></textarea>
					</div>
				</div>
<div class="layui-form-item">
	<label class="layui-form-label">激活状态：</label>
	<div class="layui-input-block">
		<select name="activeStatus" lay-verify="required">
			<option value="0">0</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
	</div>
</div>

<div class="layui-form-item">
	<label class="layui-form-label">用户类型：</label>
	<div class="layui-input-block">
		<select name="userType" lay-verify="required">
			<option value="0">0</option>
			<option value="1">1</option>
		</select>
	</div>
</div>

<input type="hidden" name="" class="hidden" />
<div class="layui-form-item">
	<div class="layui-input-block">
		<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
		<button type="reset" class="layui-btn layui-btn-primary">重置</button>
	</div>
</div>
</form>

</div>
<script src="https://lib.baomitu.com/jquery/3.0.0/jquery.js"></script>
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script type="text/javascript">
	//载入事件
	layui.use(['upload', 'form'], () => {
		//实现文件上传
		const upload = layui.upload
		const form = layui.form
		upload.render({
			elem: '#uploadImg',
			url: 'http://122.225.55.70:2666/logFiles/upload',
			//上传文件完毕的函数
			done(res) {
				if (res.code === '0') {
					//将上传的文件回显至界面上
					const url = res.data.uploadPath
					const img = $(`<img src=http://122.225.55.70:2666/upload/${url}/>`)
					$(".img-list").append(img)
					//将文件存入隐藏域中，可能存多份文件所以文件路径以逗号区分
					let urls = $(".hidden").val()
					urls += url + ','
					$(".hidden").val(urls)
				} else {

				}
			}
		})
		form.on('submit(formDemo)',(obj)=>{
			console.log(obj.field)
			$.ajax({
				type:'POST',
				url:'http://122.225.55.70:2666/accountUsers/',
				headers: {
					'Content-Type': 'application/json',
					'authToken':'9791b599a1364fe98ecb8a13a2628195',
					'submitKey':'9791b599a1364fe98ecb8a13a2628195'
				},
				data: JSON.stringify(
				obj.field
				),
				dataJson:'json',
				success(res){
					if(res.code ==='0'){
						alert('新增成功')
						location.href='./02.html'
					}
				}
			})
		})
	})
</script>



</body>
</html>
